<template>
    <div class="notice" v-if="orderRules">
        <Section title="预定须知">
            <div class="notice-inner">
                <template v-for="(item, index) in orderRules" :key="index">
                    <div class="item">
                        <span class="title">{{ item.title }}</span>
                        <span class="intro">{{ item.introduction }}</span>
                        <span class="tip" v-if="item.tips">查看说明</span>
                    </div>
                </template>
            </div>
        </Section>
    </div>
</template>

<script setup>
import Section from "@/components/detail/section.vue";
import useDeatilStore from "@/stores/modules/detail";
import { storeToRefs } from "pinia";
import { computed } from "vue";

const detailStore = useDeatilStore();
const { mainPart } = storeToRefs(detailStore);
const orderRules = computed(() => mainPart.value.dynamicModule?.rulesModule.orderRules);
</script>

<style lang="less" scoped>
.notice-inner {
  .item {
    display: flex;
    margin: 10px 0 20px;
    font-size: 12px;

    .title {
      width: 64px;
      color: #666;
    }

    .intro {
      flex: 1;
      color: #333;
    }
  }
}
</style>